<template>
  <div class="template-list">
    <div class="list-header">
      <el-input
        v-model="searchQuery"
        placeholder="搜索模板"
        prefix-icon="Search"
        clearable
        @input="handleSearch"
      />
      <el-select v-model="category" placeholder="选择分类" @change="handleFilter">
        <el-option label="全部" value="" />
        <el-option
          v-for="cat in categories"
          :key="cat"
          :label="cat"
          :value="cat"
        />
      </el-select>
    </div>

    <div class="list-content">
      <el-row :gutter="20">
        <el-col 
          v-for="template in templates"
          :key="template.id"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
        >
          <template-card :template="template" />
        </el-col>
      </el-row>

      <div v-if="loading" class="loading">
        <el-skeleton :rows="3" animated />
      </div>

      <el-empty v-else-if="!templates.length" description="暂无模板" />
    </div>

    <div class="list-footer">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[12, 24, 36, 48]"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import TemplateCard from './TemplateCard.vue'
import type { WorkflowTemplate } from '@/types/template'

const templates = ref<WorkflowTemplate[]>([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(12)
const searchQuery = ref('')
const category = ref('')
const categories = ref<string[]>([])

const loadTemplates = async () => {
  loading.value = true
  try {
    const params = new URLSearchParams({
      page: currentPage.value.toString(),
      pageSize: pageSize.value.toString(),
      category: category.value,
      search: searchQuery.value
    })

    const response = await fetch(`/api/templates?${params}`)
    const data = await response.json()
    
    templates.value = data.items
    total.value = data.total
  } catch (error) {
    console.error('Failed to load templates:', error)
    ElMessage.error('加载模板失败')
  } finally {
    loading.value = false
  }
}

const loadCategories = async () => {
  try {
    const response = await fetch('/api/templates/categories')
    categories.value = await response.json()
  } catch (error) {
    console.error('Failed to load categories:', error)
  }
}

const handleSearch = () => {
  currentPage.value = 1
  loadTemplates()
}

const handleFilter = () => {
  currentPage.value = 1
  loadTemplates()
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  loadTemplates()
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  loadTemplates()
}

onMounted(() => {
  loadCategories()
  loadTemplates()
})
</script>

<style scoped>
.template-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.list-header {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.list-content {
  flex: 1;
  min-height: 400px;
}

.loading {
  padding: 40px;
}

.list-footer {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style> 